<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>e-Dossier</title>
<meta name="description" content="">
<meta name="author" content="">
<link href="../css/credoc-bootstrap.min.css" rel="stylesheet">

<!-- Temporary link... before merging into credoc-bootstrap.min.css -->
<link href="../css/credoc.css" rel="stylesheet">

</head>

<body style="padding-top: 42px;">

	<div class="navbar navbar-fixed-top">

		<!-- BLACK GRADIENT HEADER -->
		<div class="top-nav">
			<!-- cf. portal impl -->
			<a href="index.html"><img src="../img/logo.png" height="34"
				width="85"></a>
		</div>
		<!-- end top-nav -->

	</div>
	<!-- end navbar navbar-fixed-top -->

	<header>
		<ul class="breadcrumb" id="breadcrumb">
			<li><a href="">Dashboard</a></li>
			<span class="divider">/</span>
			<li><a href="">Search</a></li>
			<span class="divider">/</span>
			<li><a href="">Consult eDossier (ED-2013-PED758)</a></li>
		</ul>
	</header>

	<div id="sidebar-nav">

		<div class="context-header">

			<div class="row">
				<div class="span3">
					<div class="row">
						<div class="span1">
							<div class="pull-left">
								<img src="../img/icon_edossier.png" height="34" width="35">
							</div>
						</div>
						<div class="span2 header">
							<div class="row">
								<div class="pull-left">
									<div class="pull-left icon-user icon-gray"></div>
									<div class="pull-left user header-text">John Doe</div>
								</div>
								<!-- end pull-left -->
							</div>
							<!-- end row -->
							<div class="row top-buffer">
								<div class="pull-left">
									<div class="pull-left icon-calendar icon-gray"></div>
									<div class="pull-left user header-text">13/03/2013</div>
								</div>
								<!-- end pull-left -->
							</div>
							<!-- end row -->
						</div>
						<!-- end span2 -->
					</div>
				</div>
			</div>

			<div class="context-title">

				<div>
					<p>
					<h6>Gallia est omnis divisa in partes tres, quarum unam
						incollunt Belgae, aliam aquitani, tertiam qui ipsorum...</h6>
					</p>
				</div>
			</div>

		</div>

		<ul id="dashboard-menu" class="nav nav-list">
			<li class="active "><a href=""><i class="icon-briefcase"></i>
					<span>General Info</span></a></li>
			<li class=" "><a href=""><i class="icon-folder-open"></i> <span>Deeds</span></a></li>
			<li class=" "><a href=""><i class="icon-user"></i> <span>Parties<span
						class="badge badge-info pull-right">3</span></span></a></li>
			<li class=" "><a href=""><i class="icon-home"></i> <span>Goods<span
						class="badge badge-info pull-right">2</span></span></a></li>
			<li class=" "><a href=""><i class="icon-file"></i> <span>Documents<span
						class="badge badge-info pull-right">2</span></span></a></li>
			<li class=" "><a href=""><i class="icon-time"></i> <span>History</span></a></li>
		</ul>
	</div>

	</div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span16">
				<div class="content">

					<!-- Context page - Button Bar -->

					<div class="button-bar">
						<button class="btn btn-primary btn-small" type="button">
							<i class="icon-plus-sign"></i> Add Party
						</button>
					</div>

					<!-- Context page - Content -->
					<div class="content-pane">

						<div class="row-fluid">
							<div class="span7">
								<div class="group-title">Parties</div>
								<hr class="dotted">
							</div>
							<div class="btn-group pull-right" data-toggle="buttons-radio">
								<a class="btn" href="#"><i class="icon-list"></i></a> <a
									class="btn active" href="#"><i class="icon-th-large"></i></a>
							</div>
						</div>

						<table
							class="table table-first-column-number data-table sort display">
							<thead>
								<tr>

									<th>Type<span class="sort-icon"><span></th>
									<th>Name<span class="sort-icon"><span></th>
									<th>RN/BCE<span class="sort-icon"><span></th>
									<th>Last update<span class="sort-icon"><span></th>
									<th>Birthdate</th>
									<th>Customer</th>
									<th>
									<th>
									<th><span></th>
									<th><span></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Physical</td>
									<td>SCHEPEN, Daisy</td>
									<td>83442605453</td>
									<td>26/03/2013</td>
									<td>26/04/1983</td>
									<td class="pull-center"><input type="radio"></td>
									<td><a href="#" rel="tooltip" title="Create a community"
										data-toggle="modal" data-target="#modalParties"
										class="community-btn"><i class="icon-group"></i></a></td>
									<td><a href="#" rel="tooltip"
										title="Authenticate this party" data-toggle="modal"
										data-target="#editModalGoods"><i class="icon-inbox"></i></a></td>
									<td><a href="#" rel="tooltip"
										title="Remove this party this good" data-toggle="modal"
										data-target="#deleteConfirm"><i class="icon-trash"></i></a></td>
								</tr>
								<tr>
									<td>Physical</td>
									<td>SCHEPEN, Micha</td>
									<td>87442605960</td>
									<td>26/03/2013</td>
									<td>21/01/1985</td>
									<td class="pull-center"><input type="radio"></td>
									<td><a href="#" rel="tooltip" title="Create a community"
										data-toggle="modal" data-target="#modalParties"
										class="community-btn"><i class="icon-group"></i></a></td>
									<td><a href="#" rel="tooltip"
										title="Authenticate this party" data-toggle="modal"
										data-target="#editModalGoods"><i class="icon-inbox"></i></a></td>
									<td><a href="#" rel="tooltip"
										title="Remove this party this good" data-toggle="modal"
										data-target="#deleteConfirm"><i class="icon-trash"></i></a></td>
								</tr>
								<tr>
									<td>Physical</td>
									<td>SHABON, Natasha</td>
									<td>85410117029</td>
									<td>26/03/2013</td>
									<td>31/07/1987</td>
									<td class="pull-center"><input type="radio"></td>
									<td><a href="#" rel="tooltip" title="Create a community"
										data-toggle="modal" data-target="#modalParties"
										class="community-btn"><i class="icon-group"></i></a></td>
									<td><a href="#" rel="tooltip"
										title="Authenticate this party" data-toggle="modal"
										data-target="#editModalGoods"><i class="icon-inbox"></i></a></td>
									<td><a href="#" rel="tooltip"
										title="Remove this party this good" data-toggle="modal"
										data-target="#deleteConfirm"><i class="icon-trash"></i></a></td>
								</tr>
						</table>

						<div class="row-fluid">
							<div class="span3"></div>
							<div class="span5">
								<div class="pagination text-center">
									<ul>
										<li><a href="#">Prev</a></li>
										<li><a href="#">1</a></li>
										<li><a href="#">2</a></li>
										<li><a href="#">3</a></li>
										<li><a href="#">4</a></li>
										<li><a href="#">5</a></li>
										<li><a href="#">Next</a></li>
									</ul>
								</div>
							</div>
							<div class="span3"></div>
						</div>

					</div>
					<!-- end content-pane -->

					<!-- COMMUNITY POPUP -->
					<div id="modal-create-community" class="modal hide fade"
						tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
						aria-hidden="true">
						<div id="m-header" class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<h4>Create Community</h4>
						</div>
						<div class="modal-body">
							<div id="body-content" class="tab-content">
								<div class="modal-form">
									<div class="row">
										<div class="span4 offset1">
											<address>
												National Number <br> Name <br> Date of Birth
											</address>
										</div>
										<div class="span4">
											<address>
												<strong>1256987458965</strong> <br> <strong>David
													Kruger</strong> <br> <strong>05/05/1968</strong>
											</address>
										</div>
									</div>

									<div class="row">
										<div class="span10 offset1">
											<div class="group-title">Select a party</div>
											<hr class="dotted">
										</div>
									</div>

									<div class="row">
										<div class="span10 offset1">
											<table
												class="table table-first-column-number data-table sort display">
												<thead>
													<tr>

														<th>Name <i class="sort-icon pull-right"></i></th>
														<th>RN/BCE <i class="sort-icon"></i></th>
														<th>Date of Birth<span class="sort-icon"><span></th>
														<th></th>
														<th>Scope</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>PEETERS, Lesly</td>
														<td>5896587458</td>
														<td>04/04/2085</td>
														<td class="check-up"><input type="radio"></td>
														<td>eDossier</td>
													</tr>
													<tr>
														<td>DUPONT, Marie</td>
														<td>5897856985</td>
														<td>12/04/1956</td>
														<td class="check-up"><input type="radio"></td>
														<td>eDossier</td>
													</tr>
													
											</table>
										</div>
									</div>

								</div>
							</div>
							<!-- end tab-content -->
						</div>
						<!-- end modal-body -->

						<div id="m-footer" class="modal-footer">
							<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
							<button class="btn btn-inverse">
								<i class="icon-group"></i> Create
							</button>
						</div>
					</div>

				</div>
				<!-- end span10 -->
			</div>
			<!-- end row-fluid -->
		</div>
		<!-- end container-fluid -->

		<footer>
			<div class="footer">
				<div class="container narrow row-fluid"></div>
			</div>
		</footer>

		<!-- LIBRARY -->
		<script src="../js/credoc-scripts.min.js"></script>
		<script src="../js/bootstrap-affix.js"></script>

		<script type="text/javascript">
			$('body').tooltip({
				selector : '[rel=tooltip]'
			});
		</script>

		<!--  -->
		<script type="text/javascript">
			$('.community-btn').on('click', (function(e) {
				console.log('community button clicked');
				// call confirmation modal
				$('#modal-create-community').modal({
					keyboard : true
				});
				//
			}));

			$('#modal-create-community').on(
					'show',
					(function(e) {
						var modal = $(this);

						modal.css('margin-top', (modal.outerHeight() / 2) * -1)
								.css('margin-left',
										(modal.outerWidth() / 2) * -1);

						return this;
					}));
		</script>
</body>
</html>